<template>
	<view class="pagebox flex-column" v-if="obj.wh">
		<navSearchTop @srarch="srarch"/>
		<view class="combox flex-row pt20" :style="{top:`${obj.wh.navHeight}px`}" @click="proxy.$c.go_url(`/pages/companyDetail?id=${obj.company.company_id}&name=${obj.company.name}`)">
			<view class="imgbox ml30"> <image src="../../static/42.png" mode="aspectFill"></image> </view>
			<view class="flex-column">
				<view class="name mb10">{{obj.company.name}}</view>
				<view class="flex-row-center">
					<image class="descicon" src="../../static/43.png" mode="widthFix"></image>
					<text class="desc">河北 安平 17年经营经验</text>
				</view>
				<view class="desc">提供质保服务 深度定制</view>
			</view>
			<image class="tuijian" src="../../static/44.png" mode="aspectFill"></image>
		</view>
		<view class="searchs" :style="{top:`${obj.pronavtabH}px`}"><searchs @searchs="searchsChange" /></view>
		<div :style="{height:`${obj.spaceH}px`}"></div>
		
		<products :list="obj.list" />
		<view v-if="obj.loadstatus=='noMore'&&obj.list.length" class="w100 flex-center f22 gray-color mt20 pb20">-- 沒有了 --</view>
		<view v-if="!obj.list.length" class="w100 flex-center f22 gray-color" style="height: 800rpx;">暂无数据</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
	import { onLoad,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import products from './products'
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		pronavtabH: proxy.$c.getglobal().navHeight+uni.upx2px(140),
		spaceH: proxy.$c.getglobal().navHeight+uni.upx2px(248),
		wh: proxy.$c.getglobal(),
		company: {},
		req: {
			"company_id": '',
			"sort": 0,
			"key": "",
			"mesh_max": "",
			"mesh_min": "",
			"wire_diameter_max": "",
			"wire_diameter_min": "",
			"aperture": "",
			"length_max": "",
			"length_min": "",
			"width_max": "",
			"width_min": "",
			"material": "",
			"weaving_type": "",
			"tag_scene": "",
			"tag_industry": "",
			"tag_product": "",
			"currentpage": 1,
			"pagesize": 10
		},
		url: 'mp/product/list',
		list: [],
		loadstatus: 'more',//more loading noMore
		
	})
	
	onLoad((opt)=>{
		obj.company = opt
		obj.req.company_id = opt.company_id
		init()
	})
	
	const srarch=(value)=>{
		obj.req.key = value
		obj.req.currentpage = 1
		init()
	}
	
	const searchsChange=(req)=>{
		obj.req = {
			...obj.req,
			...req,
			mesh_min: req.mesh,
			mesh_max: req.mesh
		}
		init()
	}
	
	const getmsg=()=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post(obj.url,obj.req,{token: true},).then(d=>{
				resovle(d.msg||{})
			}).catch(err=>{resovle({})})
		})
	}
	
	const init=async()=>{
		obj.req.currentpage = 1
		uni.showLoading({title: 'loading...',icon:'none'})
		let msg = await getmsg()
		obj.list = []
		uni.hideLoading()
		uni.stopPullDownRefresh()
		if(msg&&msg.list&&msg.list.length){
			obj.loadstatus = (obj.req.currentpage * obj.req.pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}
	}
	
	const getMore=async()=>{
		obj.loadstatus = 'loading'
		let msg = await getmsg()
		uni.stopPullDownRefresh()
		if(msg&&msg.list&&msg.list.length){
			obj.loadstatus = (obj.req.currentpage * obj.req.pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}else{
			obj.loadstatus = 'noMore'
		}
	}
	
	const setdatas=(list)=>{
		list.map(async(e,i)=>{
			const o = obj.list.find(ev=>ev.product_id==e.product_id&&ev.size_id==e.size_id)
			if(!o){
				obj.list.push(e)	
			}
		})
		if(obj.loadstatus!='noMore'){
			obj.req.currentpage += 1;
		}
	}
	
	onPullDownRefresh(()=>{
		console.log('下拉了');
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},5000)
		init()
	})
	
	onReachBottom(()=>{
		console.log('到底了');
		getMore()
	})
</script>

<style lang="scss" scoped>
.pagebox{
	.searchs{position: fixed;left: 0;z-index: 99; width: 100vw;padding: 30rpx 30rpx 10rpx;box-sizing: border-box;background-color: #fff;}
	.combox{
		position: fixed;left: 0;z-index: 99;width: 100vw;background-color: #fff;
		.imgbox{width: 120rpx;height: 120rpx; margin-right: 20rpx; image{width: 100rpx;height: 100rpx;}}
		.name{font-size: 27rpx;font-weight: bold;color: #111111;}
		.descicon{width: 80rpx;}
		.desc{font-size: 22rpx;font-weight: 500;color: #333;}
		.tuijian{position: absolute;right: 0;top: 20rpx;z-index: 1;width: 88rpx;height: 88rpx;}
	}
	// width: 100vw;height: 100vh;
}
</style>
